<template>
  <cu-layout tabbar="/pages/main/user" :bgStyle="{ src: $CDN('/common/static/images/main_bg.png') }" :showNavar="true">
    <!-- 顶部状态栏 -->

    <template #navbar>
      <uv-navbar :placeholder="false" leftIcon="" bgColor="transparent">
        <template #right>
          <!-- #ifdef APP-PLUS -->
          <view class="right-slot">
            <image class="icon setting" @click="handleJump('/pages/subpackage/setting/index')" :src="$CDN('/common/static/images/icon/settings.png')"></image>
            <!-- <image class="icon bell" @click="handleJump()" :src="$CDN('/common/static/images/icon/tongzhi.png')"></image> -->
          </view>
          <!--  #endif -->
        </template>
      </uv-navbar>
    </template>
    <view :class="[`${prefixCls}-user-container`]" :style="{ paddingTop: `${$Platform.navbar}px` }">
      <view class="user-card">
        <div class="basic">
          <div class="avatar"><image :src="userInfo.headimgurl || $CDN('/common/static/images/avatar.png')" mode="aspectFit" /></div>
          <div v-if="isLogin" class="infos">
            <div class="nickname uv-line-1">{{ userInfo.nickname }}</div>
            <div class="subscript" @click.stop="handleUserInfo">点击查看个人信息 <uv-icon size="16" name="arrow-right" color="#fff" :customStyle="{ marginLeft: '5px' }" /></div>
          </div>
          <div v-else class="login" @click="handleLogin">
            <div class="nickname">登录/注册</div>
          </div>
        </div>
        <!-- 会员 -->
        <!-- <div class="member">
          <image class="icon" :src="$CDN('/common/static/images/icon/grade.png')"></image>
          <view class="member-number">Lv1</view>
        </div> -->
        <!-- 修改盒子嵌套 所以将下面及部分区域合并再domain中 -->
        <!-- 功能区 -->
        <div class="domain">
          <div class="domain-item" v-for="(item, index) in domain" :key="index" @click="handleJumpToPage(item)">
            <image class="icon" :src="item.icon"></image>
            <div>{{ item.name }}</div>
          </div>
        </div>
        <!-- 活动列表 -->
        <!-- <div class="activity-list">
          <div class="activity-item" v-for="(item, index) in activity" :key="index" @click="handleJumpToPage(item)">
            <image class="icon" :src="item.icon"></image>
            <div class="text">{{ item.name }}</div>
          </div>
        </div> -->
        <!-- 活动轮播 -->
        <!-- <div class="swiper-container" v-if="banner.length">
          <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff80" indicator-active-color="#FFFFFF" :autoplay="true" :interval="5000" :duration="500">
            <swiper-item v-for="(item, index) in banner" :key="index">
              <div class="swiper-item">
                <image :src="item.img" />
              </div>
            </swiper-item>
          </swiper>
        </div> -->
      </view>
      <!-- options -->

      <div class="options-container">
        <div class="user-options-title">{{ customTitle || '我的苏享家' }}</div>
        <div class="options-item" v-for="(item, index) in custom" :key="index" @click="handleJumpToPage(item)">
          <image class="icon" :src="item.icon"></image>
          <div class="text">{{ item.name }}</div>
        </div>
      </div>
      <view class="user-article" @click="handleJumpToPage({ isLogin: false, path: '/pages/subpackage/article/index' })">
        <image :src="article_img"></image>
      </view>
      <!-- #ifndef APP-PLUS -->
      <view v-if="isLogin" class="user-operate">
        <uv-button size="normal" color="#fff" :customTextStyle="{ color: '#333' }" text="退出登录" @click="logoutClick"></uv-button>
      </view>
      <!-- #endif -->
    </view>
  </cu-layout>
</template>

<script>
import { customerCenter } from '@/api/user'
import share from '@/mixins/share'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'user',
  mixins: [share],
  props: {},
  data() {
    return {
      article_img: CDN('/common/static/images/article_banner.png'),
      domain: [
        // { name: '收藏', isLogin: true, path: '', icon: CDN('/common/static/images/icon/shoucang.png') },
        { name: '约看', isLogin: true, path: '/pages/subpackage/appointment/index', icon: CDN('/common/static/images/icon/yuekan.png') },
        { name: '优惠券', isLogin: true, path: '/pages/subpackage/coupon/index', icon: CDN('/common/static/images/icon/youhuiquan.png') },
        { name: '我的预定', isLogin: true, path: '/pages/subpackage/reserved/my-reservation', icon: CDN('/common/static/images/icon/yuding.png') },
        // { name: '预定', isLogin: true, path: '/pages/subpackage/reserved/my-reservation', icon: CDN('/common/static/images/icon/yuding.png') },
        // { name: '预定', isLogin: true, path: '/pages/subpackage/reserved/online-booking', icon: CDN('/common/static/images/icon/yuding.png') },
        // { name: '秒杀', isLogin: true, path: '', icon: CDN('/common/static/images/icon/miaosha.png') },
        // #ifndef MP-WEIXIN
        // { name: '签约', isLogin: true, path: '/pages/subpackage/online-signing/index', icon: CDN('/common/static/images/icon/miaosha.png') },
        // #endif
      ],
      // activity: [
      //   { name: '优惠券', isLogin: true, path: '', icon: CDN('/common/static/images/icon/youhuiquan.png') },
      //   { name: '推荐有礼', isLogin: true, path: '', icon: CDN('/common/static/images/icon/tuijian.png') },
      //   { name: '企业员工认证', isLogin: true, path: '', icon: CDN('/common/static/images/icon/renzheng.png') },
      //   { name: '资产合作', isLogin: true, path: '', icon: CDN('/common/static/images/icon/hezuo.png') },
      // ],
      banner: [],
      customTitle: '',
      custom: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),
    // onSharePageConfig() {
    //   return this.$Platform.share.getShareInfo(
    //     {
    //       title: '我的',
    //       image: 'https://cdn.uviewui.com/uview/album/1.jpg',
    //       desc: '个人中心',
    //       params: {
    //         page: '2',
    //         query: 111,
    //       },
    //     },
    //     {
    //       type: 'user', // 海报
    //       title: '我的', // 标题
    //       image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', // 主图
    //       price: '323.45', // 价格
    //       original_price: '887.99', // 原价
    //     },
    //   )
    // },
  },
  // 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成
  onLoad(options) {
    // console.log('🚀 ~ onLoad ~ options:', options)
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},
  onBackPress(e) {
    // console.log(e)
  },
  // 页面滚动
  onPageScroll(e) {
    // console.log('user', e)
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('user', ['Logout']),
    async getData() {
      const { data } = await customerCenter({ is_black: 0, is_new: 0 })
      this.banner = data.banner
      this.custom = data?.data
        // 后端 need_login为反的 所以 取反
        .map((v) => {
          return {
            name: v.name,
            isLogin: !v.need_login,
            path: v.jump_url,
            icon: v.img,
            sort: v.sort,
          }
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
      this.customTitle = data?.title
    },
    handleLogin() {
      if (!this.isLogin) this.$ROUTE.go('/pages/user/auth', { redirect: encodeURIComponent(this.$Route.fullPath) })
      // else this.$ROUTE.go('/pages/user/info')
    },
    // 跳转到对应的模块
    handleJumpToPage({ isLogin, path }) {
      if (!path) {
        uni.$uv.toast('即将上线，敬请期待')
        return
      }
      if (isLogin && !this.isLogin) {
        this.handleLogin()
      }
      console.log('🚀 ~ handleJumpToPage ~ path:', path)
      this.$ROUTE.go(path)
    },
    handleUserInfo() {
      this.$ROUTE.go('/pages/user/information')
    },
    logoutClick() {
      uni.showModal({
        title: '提示',
        content: '确定要退出当前的登录状态吗？',
        success: (res) => {
          if (res.confirm) {
            this.Logout()
            this.$ROUTE.go('/pages/main/home')
          }
        },
      })
    },
    handleJump(path) {
      if (path) {
        this.$ROUTE.go(path)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.right-slot {
  display: flex;
  .icon {
    width: 48rpx;
    height: 48rpx;
  }
  .bell {
    margin: 0 0 0 10px;
  }
}
.#{prefixCls('user-container')} {
  position: relative;
  padding: 48rpx 30rpx 100px;
  .user-card {
    // margin-bottom: 20rpx;
    padding: 20rpx 0 0;
    .basic {
      @include flex;
      margin-bottom: 32rpx;
      .avatar {
        width: 116rpx;
        height: 116rpx;
        margin-right: 32rpx;
        @include flex-center;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .infos {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: baseline;
        .nickname {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
          margin: 18rpx 0 16rpx;
        }
        .subscript {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 12px;
          margin-bottom: 18rpx;
        }
      }
      .login {
        flex: 1;
        display: flex;
        align-items: center;
        .nickname {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
          color: #fff;
        }
      }
    }
  }
  .additional {
    background: white;
    @include flex-bar;
    .additive {
      width: 25%;
      @include flex-center;
      flex-direction: column;
      background-color: #fff;
      padding: 16rpx;
      border-radius: 16rpx;
      .icon {
        width: 64rpx;
        height: 64rpx;
        margin-bottom: 16rpx;
        @include flex;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        color: #666;
        font-size: 26rpx;
      }
    }
    .additive + .additive {
      margin-left: 20rpx;
    }
  }
  .member {
    background: #fff cdn('/common/static/images/huiyuan.png') no-repeat;
    background-size: cover;
    background-position: center;
    height: 80px;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    .icon {
      width: 80rpx;
      height: 80rpx;
    }
  }
  .domain {
    // background: #f5f5f5;
    // margin-top: -20px;
    flex-wrap: wrap;
    // width: 100vw;
    background: white;
    // margin-left: -15px;
    border-radius: 16px;
    // border-bottom-left-radius: 0;
    // border-bottom-right-radius: 0;
    // background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    padding: 32rpx 0 24rpx;
    display: flex;
    align-items: center;
    .domain-item {
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26rpx;
      color: #666666;
      .icon {
        margin-bottom: 16rpx;
        width: 32px;
        height: 32px;
      }
    }
  }
  .activity-list {
    flex-basis: 100%;
    margin: 0 15px;
    margin-top: 16px;
    padding: 32rpx 0 24rpx;
    border-radius: 16px;
    background: white;
    display: flex;
    align-items: center;
    .activity-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26rpx;
      color: #666666;
      .icon {
        margin-bottom: 16rpx;
        width: 32px;
        height: 32px;
      }
    }
  }
  .swiper-container {
    flex-basis: 100%;
    margin: 15px 15px 0;
    width: 100%;
    box-sizing: border-box;
    // padding: 32rpx 0rpx 0;
    border-radius: 8rpx;
    .swiper {
      height: 74px;
      .swiper-item,
      image,
      image {
        background: #f1f1f1;
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
      .swiper-item {
        box-sizing: border-box;
        margin: 0 10rpx;
        width: calc(100% - 20rpx);
      }
    }
  }
  .user-options-title {
    flex-basis: 100%;
    font-size: 32rpx;
    font-weight: bold;
    // margin: 20rpx 0;
  }
  .options-container {
    display: flex;
    flex-wrap: wrap;
    background: white;
    border-radius: 8px;
    padding: 32rpx 30rpx;
    margin: 15px 0;
    .options-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 48rpx;
      // &:nth-child(-n + 4) {
      //   margin-top: 0;
      // }
      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 16rpx;
      }
      .text {
        font-size: 26rpx;
        color: #666666;
        line-height: 20px;
        text-align: center;
      }
    }
  }
  .user-article {
    margin-bottom: 30rpx;
    image {
      width: 686rpx;
      height: 188rpx;
      border-radius: 16rpx;
    }
  }
  // .user-options {
  //   margin-bottom: 20rpx;
  //   width: 100%;
  //   box-sizing: border-box;
  //   border-radius: 16rpx;
  //   background: #ffffff;
  //   padding: 16rpx 16rpx 16rpx 24rpx;
  //   .list-item {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     padding: 24rpx 0;
  //     .left {
  //       display: flex;
  //       align-items: center;
  //       .icon {
  //         width: 40rpx;
  //         height: 40rpx;
  //         margin-right: 16rpx;
  //       }
  //       text {
  //         font-size: 28rpx;
  //         font-weight: 400;
  //         color: #333333;
  //         line-height: 32rpx;
  //       }
  //     }
  //     .right {
  //       width: 32rpx;
  //       height: 32rpx;
  //     }
  //   }
  // }
}
.user-article {
  width: 686rpx;
  height: 188rpx;
  border-radius: 16rpx;
  image {
    width: 100%;
    height: 100%;
    width: 686rpx;
    height: 188rpx;
  }
}
</style>
